import React,{ Component } from 'react'
import './index.css'
import {Link} from 'react-router-dom'

class List extends Component{
    constructor(props){
        super(props)        
    }
    render(){    
        return (
            <div className='app-list-box'> 
            <Link to={`/bookdetail/${this.props.id}`}> 
                <img className='l' src={unescape(this.props.cover.substring(7))}></img>
                <div className='list-box l'>
                    <h4>{this.props.title}</h4>
                    <p>
                        <span>{this.props.author}</span>
                        <b>{this.props.majorCate}</b>
                    </p>
                    <p className='content over'>
                        {this.props.shortIntro}
                    </p>
                    <p className='pupular'>
                    <span>
                            <i>{this.props.latelyFollower}</i>
                            人气
                        </span>
                        <u>|</u>
                        <span>
                        <i>{this.props.retentionRatio}%</i>
                            读者
                        </span>
                    </p>                
                </div>  
                </Link>
            </div>
        )
    }
}
export default  List